<!-- 添加讨论弹窗 -->
<template>
    <div>
        <CommonDialog 
            :visible="props.visible" 
            width="698px" 
            :title="`${formData.courseWareId ? '编辑讨论' : '添加讨论'}`"   
            @on-close="cancel"
            @on-confirm="confirm"
            :show-footer="true"
        >
            <div class="form-warp">
                <el-form ref="formRef" :model="formData" :rules="formRule" :label-width="110">
                    <el-form-item label="讨论标题" prop="contentTitle" class="srt-el-input-item">
                        <el-input show-word-limit maxlength="50" type="text" v-model="formData.contentTitle"
                            class="srt-el-input" placeholder="请输入" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="讨论描述"  class="srt-el-input-item">
                        <el-input resize="none" show-word-limit maxlength="200" type="textarea" v-model="formData.desc"
                            class="srt-el-input" placeholder="请输入文本，最多200个字" style="height:110px">
                        </el-input>
                    </el-form-item>
                    <div class="is-must">
                        <span class="label">参与讨论设置</span>
                        <div class="setup">
                            <span class="title">学员必须参与讨论</span>
                            <el-switch
                                v-model="formData.isMust"
                                class="ml-2"
                                style="--el-switch-on-color: #24B676;"
                                :active-value="1"
                                :inactive-value="0"
                                active-text="是"
                                inactive-text="否"
                                inline-prompt
                            />
                        </div>
                    </div>
                </el-form>
            </div>
        </CommonDialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from "vue"
import CommonDialog from '@/components/common-dialog.vue'
import { deepCopy, queryToJson, Debounce } from '@/lib/tools';
import { useRoute } from 'vue-router'

const route = useRoute()

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    catalogueData: {
        type: Object,
        default: () => {
            return {};
        } 
    },
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
})

const emit = defineEmits(['update:visible', 'update-tree-after-edit']);

const formRef = ref(null);

const formRule = ref({
    contentTitle: [
        {
            required: true,
            validator: (rule, value, callback) => {
                let temp = value && value.trim() || '';
                if (temp.length > 50 || temp.length < 2) {
                    callback('请输入2-50个字的标题');
                }else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ]
});

const formData = ref({
    contentTitle: '',
    isMust: 0,
    desc: ''
})

watch(() => props.catalogueData, (val) => {
    if(val?.catalogueId && val.courseWare?.contentType == 'comment'){
        getDetail(val.catalogueId)
    }else{
        nextTick(() => {
            formData.value = {
                contentTitle: '',
                isMust: 0,
                desc: ''
            }
            formRef.value && formRef.value.resetFields();
        })
    }
})

function cancel(){
    emit('update:visible', false);
}

function confirm(){
    formRef.value.validate((valid, form) => {
        console.log(valid, form)
        if (valid) {
            save();
        }
    })
}


// 编辑详情回显
function getDetail(id){
    G_transmit('courseContentDetail', {
        queries: {
            id
        }
    })
    .then((res) => {
        formData.value = Object.assign(formData.value,res.data, {
            desc: res?.data?.contentExtend && JSON.parse(res.data.contentExtend)?.desc || ''
        })
    })
}
function save(){
    let courseId = queryToJson().courseId || route.params.courseId;
    let params = {
        contentTitle: formData.value.contentTitle,
        isMust: formData.value.isMust,
        contentExtend:formData.value.desc && JSON.stringify({desc: formData.value.desc}) || '',
        contentType: 'comment',
        tag: 'comment'
    }
    if(formData.value.courseWareId){
        params = {
            ...params,
            id: props.catalogueData.catalogueId,
            courseWareId: formData.value.courseWareId,
            contentId: formData.value.contentId
        }
    }
    G_transmit('courseContentCreate', {
        data: {
            contentList: [
                {
                    ...params
                }
            ],
            courseId: courseId,
            pid: props.catalogueData.catalogueType == 1 ? props.catalogueData.pid : props.catalogueData.catalogueId
        }
    })
    .then((res) => {
        if (res.data && res.data.length) {
            let temp = res.data[0]
            let pid = props.catalogueData?.catalogueId && props.catalogueData.courseWare?.contentType == 'comment' ? props.catalogueData.pid : props.catalogueData.catalogueId ? props.catalogueData.catalogueId : 0;
            let format = {
                catalogueId: temp.id,
                catalogueName: formData.value.contentTitle,
                catalogueType: 1,
                pid: pid,
                courseWare: {
                    ...params,
                    id: temp.id
                },
                contentType: 'comment',
                tag: 'comment'
            }

            emit('update-tree-after-edit', formData.value.courseWareId ? 'update' : 'append', format)
            emit('update:visible', false);
        }
        // G_dispatchEvent('toast', { message: `${formData.value.courseWareId ? '编辑成功' : '添加成功'}`, type: 'success'});
    })
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
:deep(.form-warp){
    // margin-left: 28px;
    .el-form-item{
        margin-bottom: 24px;
    }
    .el-textarea .el-textarea__inner{
        height: 100%;
    }
    .is-must{
        display: flex;
        align-items: center;
        .label{
            width:110px;
            text-align: right;
            padding-right: 12px;
            height: 32px;
            line-height: 32px;
        }
    }
    .setup{
        display: flex;
        align-items: center;
        .title{
            margin-right: 20px;
            font-size: 14px;
            color: #222222;
        }

    }
}
 
</style>

